<template>
    <custom-page-box>
        <div class='service-manage-container'>
            <div class='search-box'>
                <a-form-model layout='inline' :model='form' ref="ruleForm">
                    <a-form-model-item label='版本号' prop='versionNum' class='form-keyword'>
                        <a-input v-model='form.versionNum' placeholder='输入版本号进行搜索'></a-input>
                    </a-form-model-item>
                    <a-form-model-item label='更新类型' prop='type' class='form-status'>
                        <a-select v-model='form.type'>
                            <a-select-option value="">全部</a-select-option>
                            <a-select-option :value="1">可选更新</a-select-option>
                            <a-select-option :value="2">强制更新</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item class='btn'>
                        <a-button type='primary' @click='searchTable'>搜索</a-button>
                        <a-button type='primary' @click='toAdd'>添加</a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <div class='table'>
                <a-table
                    :data-source="tableData"
                    rowKey='id'
                    :pagination='false'
                    :scroll='{ y: height }'
                >
                    <a-table-column
                        key="x"
                        title="序号"
                        width='60px'
                    >
                        <template slot-scope="text, record, index">
                            <span>{{ (pageIndex - 1) * pageSize + index + 1 }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column
                        key="versionNum"
                        title="版本号"
                        data-index="versionNum"
                        width='100px'
                        :ellipsis='true'
                    />
                    <a-table-column
                        key="price"
                        title="更新类型"
                        data-index="price"
                        width='80px'
                        :ellipsis='true'
                    >
                        <template slot-scope="text, record">
                            {{ record.type === 1? '可选更新':'强制更新' }}
                        </template>
                    </a-table-column>
                    <a-table-column
                        key="description"
                        title="更新描述"
                        data-index="description"
                        width='80px'
                        :ellipsis='true'
                    />
                    <a-table-column
                        key="updateTime"
                        title="更新时间"
                        data-index="updateTime"
                        width='100px'
                        :ellipsis='true'
                    >
                        <template slot-scope="text, record">
                            {{ dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </a-table-column>
                </a-table>
            </div>
        </div>
        <custom-pagination :total="Number(total)" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTable">
        </custom-pagination>
    </custom-page-box>
</template>

<script>
import dayjs from 'dayjs'
export default {
    name: 'Version',
    data () {
        return {
            form: {
                type: '',
                versionNum: ''
            },
            total: 0,
            pageIndex: 1,
            pageSize: 10,
            tableData: [],
            height: 500
        }
    },
    created () {
        this.getTable()
    },
    mounted () {
        const arr = document.getElementsByClassName('table')
        if (arr[0]) {
            this.height = arr[0].offsetHeight - 59 + 17
        }
    },
    methods: {
        searchTable () {
            this.pageIndex = 1
            this.getTable()
        },
        async getTable () {
            const data = {
                currentPage: this.pageIndex,
                pageSize: this.pageSize,
                type: this.form.type,
                versionNum: this.form.versionNum.trim()
            }
            Object.keys(data).forEach((item) => {
                if (!item) {
                    delete data[item]
                }
            })
            const res = await this.$ApiServer['version/list'](data)
            if (res.code === 200) {
                this.tableData = res.data.records || []
                this.total = res.data.total
            } else {
                this.$message.error(res.message)
            }
        },
        toAdd () {
            this.$router.push('/version/update')
        },
        dayjs
    }
}
</script>
<style scoped lang='less'>
.service-manage-container {
  padding: 20px 20px;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 6px;
  ::v-deep {
    .ant-tabs {
      background: #fff;
      margin-bottom: 10px;
      padding-left: 20px;
      border-radius: 4px;
    }
    .ant-tabs-bar {
      border-bottom: 2px solid transparent;
      margin-bottom: 0;
    }
    .ant-tabs-nav-scroll, .ant-tabs-nav-wrap, .ant-tabs-nav-container {
      overflow: unset;
    }
    .ant-tabs-tab {
      margin-right: 0;
      text-align: center;
      font-size: 18px;
      line-height: 25px;
      padding: 18px 0;
      color: #666666;
      &.ant-tabs-tab-active {
        color: #FD5454;
      }
    }
    .ant-tabs-ink-bar {
      bottom: 0;
      width: 80px!important;
      margin: 0 14px;
      background: #FD5454;
    }
    .ant-form-item-label {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
  }
  .search-box {
    background: #fff;
    padding: 0  20px;
    border: 1px solid #E3E3E3;
    height: 50px;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    .form-type {
      ::v-deep {
        .ant-input {
          width: 300px;
        }
      }
    }
    .form-amount, .form-sales {
      ::v-deep {
        .ant-input-number-input {
          width: 80px;
        }
        .ant-form-item-children {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 40px;
          padding-top: 20px;
        }
      }
      .line {
        display: inline-block;
        line-height: 32px;
        padding: 0 4px;
      }
    }
    .form-status {
      ::v-deep {
        .ant-select {
          width: 150px;
        }
      }
    }
    .form-keyword {
      ::v-deep {
        .ant-input {
          width: 240px;
        }
      }
    }
    .btn {
      button {
        margin-right: 20px;
      }
    }
    .ant-btn{
      height: 32px;
      line-height: 32px;
    }
  }
  .table {
    background: #fff;
    height: calc(100vh - 60px - 10px  - 70px - 10px  - 40px - 50px);
  }
}
</style>
